Colors

We used 2 maps for the color from $theme-colors dan $colors.

<p class="text-primary">.text-primary</p>
<p class="text-accent">.text-accent</p>
<p class="text-dark">.text-dark</p>
<p class="text-black">.text-black</p>
<p class="text-cultured">.text-cultured</p>
<p class="text-pale-pink">.text-pale-pink</p>
<p class="text-medium-orchid">.text-medium-orchid</p>
<p class="text-eerie-black">.text-eerie-black</p>
<p>others</p>

Examples

<p class="text-primary">This is default primary text</p>
<p class="text-primary text-opacity-75">This is 75% opacity primary text</p>
<p class="text-primary text-opacity-50">This is 50% opacity primary text</p>
<p class="text-primary text-opacity-33">This is 33% opacity primary text</p>
<p class="text-primary text-opacity-25">This is 25% opacity primary text</p>
<p class="text-primary text-opacity-17">This is 17% opacity primary text</p>

Map

RGB color produced from separated SASS Map:

$utilities-text-colors: map-loop($utilities-text, rgba-css-var, "$key", "text");

Utilities API

Utilities Background can be found onscss/components/bootstrap/_utilities.scss

"color": (
    property: color,
    class: text,
    local-vars: (
        "text-opacity": 1
    ),
    values: map-merge(
        $utilities-text-colors,
        (
        "reset": inherit,
        )
    )
),
"text-opacity": (
    css-var: true,
    class: text-opacity,
    values: (
        17: .17,
        25: .25,
        33: .33,
        50: .5,
        75: .75,
        100: 1
    )
),